<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<link type="text/css" href="css/tabs.css" rel="stylesheet" />
<style type="text/css">
#wrapper {
    width: 100%;
}

ul.tabs {
    width: 100%;
    margin: 0;
    padding: 0;
}

ul.tabs li {
    display: block;
    float: left;
    padding: 0 5px;
}

ul.tabs li a {
    display: block;
    float: left;
    padding: 5px;
    font-size: 0.8em;
    background-color: #ffffff;
    color: #666;
    text-decoration: none;
}

.selected {
    font-weight: bold;
    background-color: red;
    color: red;
}

.tab-content {
    clear: both;
    border: 1px solid #ddd;
    padding: 10px;
}
</style>
<script type="text/javascript">
    (function() {
        var status = $('#status');
        $('form').ajaxForm({
            beforeSend : function() {
                status.empty();
                $('settingstab').fadeIn(3000);
                status.html('<p><img src=\"images/loading.gif\"/> Sending data to server </p>');

                /*var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal); */
            },
            /*uploadProgress : function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            }, */
            complete : function(xhr) {
                $("#status").empty().slideDown("slow").append(xhr.responseText);
                status.html(xhr.responseText);
            }
        });

        // $("#tabs").tabs();
        $('.tabs a').click(function() {
            switch_tabs($(this));
            return false;
        });

        switch_tabs($('.defaulttab'));

    })();

    function switch_tabs(obj) {
        $('.tab-content').hide();
        $('.tabs a').removeClass("selected");
        var id = obj.attr("rel");
        var link = obj.attr("href");
        //alert(link);

        if (link != "#") {
            //alert("Not equal executed now");
            $('#' + id).html("<p>Loading..</p>");
            $('#' + id).load(link);
        }

        $('#' + id).show();
        obj.addClass("selected");
    }
</script>

<div id="wrapper">
    <!--  <img src="/eftweb/images/gl_icon.gif" height="25" width="25"> -->
    <ul class="tabs">
        <li><a href="#" class="defaulttab" rel="tabs1">Configure New
                EPPD</a>
        </li>
        <li><a href="/eftweb/epp_edit_server_settings.html" rel="tabs2">Edit
                EPPD settings</a>
        </li>
        <li><a href="/eftweb/epp_view_server_settings.html" rel="tabs2">View
                EPPD's'</a>
        </li>
        <li><a href="/eftweb/index.jsp" rel="tabs3">Connection
                Settings</a>
        </li>
    </ul>

    <div class="tab-content" id="tabs1">
        <div id="settingstab" class="wrap">
            <fieldset>
                <legend>EPPD Settings</legend>
                <form action="/eftweb/epp_server_settings.html" name="epp_server_settings"
                    method="POST" enctype="multipart/form-data">
                <table>
                    <tr><td>EPPD Friendly Name :</td><td><input type="text"  name="friendlyName" size="15" /></td></tr>
                    <tr><td>EPPD Ip address    :</td><td><input type="text"  name="ipAddress" size="15" /></td>
                    <tr><td>EPPD Port Number   :</td><td><input type="text"  name="portNumber" size="4" /></td>
                    <tr><td>User Name          :</td><td><input type="text"  name="username" size="10" /></td></tr>
                    <tr><td>Password           :</td><td><input type="password" name="password" size="10" /></td></tr>
                    <tr><td>X.509 Certificate PCKS2 :</td><td><input type="file" name="pcks" /></td></tr>
                    <tr><td>X.509 Certificate JKS- A:</td><td><input type="file" name="jks" /></td></tr>
                    <tr><td><s:checkboxlist list="extensionsList" name="extensions" label="EPP Extensions" /></td></tr>
                    <tr><td><s:submit align="left" value="Save" action="epp_server_settings" /></td></tr>
            </table>
            </form>
            </fieldset>
            <div id="results"></div>
            <div id="status"></div>
        </div>

    </div>
    <div class="tab-content" id="tabs2"></div>
    <div class="tab-content" id="tabs3"></div>
</div>



